<template>
    <div class="main-container">
        <div class="main-content">
            <div class="row">
                <div class="col-sm-10 col-sm-offset-1">
                    <div class="login-container">
                        <div class="center">
                            <h2>
                                <i class="ace-icon fa fa-leaf green"></i>
                                <span class="red">Course</span>
                                <span class="white" id="id-text2">控制台登录</span>
                            </h2>
                            <h4 class="blue" id="id-company-text">&copy; Company Name</h4>
                        </div>

                        <div class="space-6"></div>

                        <div class="position-relative">
                            <div id="login-box" class="login-box visible widget-box no-border">
                                <div class="widget-body">

                                    <div class="widget-main">
                                        <h4 class="header blue lighter bigger">
                                            <i class="ace-icon fa fa-coffee green"></i>
                                            请输入用户名密码
                                        </h4>

                                        <div class="space-6"></div>

                                        <form>
                                            <fieldset>
                                                <label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input v-model="user.loginName" type="text" class="form-control" placeholder="输入用户名" />
															<i class="ace-icon fa fa-user"></i>
														</span>
                                                </label>

                                                <label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input v-model="user.password" type="password" class="form-control" placeholder="输入密码" />
															<i class="ace-icon fa fa-lock"></i>
														</span>
                                                </label>

                                                <label class="block clearfix">
                                                    <span class="block input-icon input-icon-right">
                                                        <div class="input-group">
                                                            <input v-model="user.imageCode" type="text" class="form-control" placeholder="验证码">
                                                            <span class="input-group-addon" id="basic-addon2">
                                                                <img v-on:click="loadImageCode()" id="image-code" alt="验证码" style="height: 32px;"/>
                                                            </span>
                                                        </div>
                                                    </span>
                                                </label>

                                                <div class="space"></div>

                                                <div class="clearfix">
                                                    <label class="inline">
                                                        <input v-model="remember" type="checkbox" class="ace" />
                                                        <span class="lbl"> 记住我</span>
                                                    </label>

                                                    <button type="button" v-on:click="login" class="width-35 pull-right btn btn-sm btn-primary">
                                                        <i class="ace-icon fa fa-key"></i>
                                                        <span class="bigger-110">登录</span>
                                                    </button>
                                                </div>

                                                <div class="space-4"></div>
                                            </fieldset>
                                        </form>

                                    </div><!-- /.widget-main -->

                                    <div class="toolbar clearfix">
                                        <div>
                                            <a href="#" data-target="#forgot-box" class="forgot-password-link">
                                            </a>
                                        </div>

                                        <div>
                                            <a href="#" data-target="#signup-box" class="user-signup-link">
                                            </a>
                                        </div>
                                    </div>

                                </div><!-- /.widget-body -->

                            </div><!-- /.login-box -->
                        </div><!-- /.position-relative -->
                    </div>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.main-content -->
    </div><!-- /.main-container -->
</template>

<script>
    import System_Md5 from '../../public/static/js/system_user_md5'
    export default {
        components: {System_Md5},
        name: 'login',
        data: function() {
            return {
                user: {},
                remember: true,//默认勾选记住我
                imageCodeToken: "",
            }
        },
        mounted: function () {//login登录页面的背景设置，有两种样式
            let _this = this;

            $('body').removeClass('no-skin');
            $('body').attr('class', 'login-layout blur-login');
            // $('body').attr('class', 'login-layout light-login');

            //用户登录时是否记住登录的用户信息
            let rememberUser = LocalStorage.get(LOCAL_KEY_REMEMBER_USER);
            if (rememberUser) {
                _this.user = rememberUser;
            }

            // 初始时加载一次验证码图片
            _this.loadImageCode();
        },
        methods: {
            login: function () {
                let _this = this;

                //备用给本地缓存，用户是否记住我功能
                //let passwordRemember = _this.user.password;

                //明文缓存用户信息不安全，容易被窃取。这里换一种记住我的实现方式
                /**
                 * 将用户信息存入本地缓存时增加一个属性md5Mark作为标记用于比较和密码框中的密码是否一样，
                 * md5Mark属性的值是由：被第一次加密后，再次加密得到。
                 * 提示：其实密码框中的密码是被第一次加密的值
                 * 准备一个从登录密码框获取的密码并经过md5加密的值hexMd5
                 * 在用户登录前判断：
                 * 如果hexMd5和md5Mark是一样的，说明用户上次成功登录过，
                 * 那就直接把密码框中的密码不再加密直接发送到后端登录即可。
                 * 如果hexMd5和md5Mark是不一样的，说明用户上次并没有成功登录，或者根本就是另一个用户，
                 * 他已经将密码框中的密码重新填入并点击了登录，
                 * 那就将用户的密码前后都加上盐值经过md5加密后发送到后端验证登录即可。
                 * */
                let hexMd5 = hex_md5(_this.user.password);
                let localCacheUser = LocalStorage.get(LOCAL_KEY_REMEMBER_USER);
                if (localCacheUser == null || hexMd5 !== localCacheUser.md5Mark) {
                    //前后都加上一个盐值，md5加密一次
                    _this.user.password = hex_md5(SALT.SALT_PREFIX + _this.user.password + SALT.SALT_SUFFIX);
                }

                _this.user.imageCodeToken = _this.imageCodeToken;

                Loading.show();
                _this.$ajax.post(process.env.VUE_APP_SERVER + '/system/admin/user/login', _this.user).then((response)=>{
                    Loading.hide();
                    let resp = response.data;
                    if (resp.success) {
                        //是否记住登录用户
                        if (_this.remember) {
                            //将加密过后的password再用md5再加密一次，得到一个新的md5值作为标记
                            let md5Mark = hex_md5(_this.user.password);
                            //是，将登录名和密码作为value值写入到本地缓存KEY当中
                            LocalStorage.set(LOCAL_KEY_REMEMBER_USER, {
                                loginName: _this.user.loginName,
                                password: _this.user.password,
                                md5Mark: md5Mark,
                            });
                        } else {
                            //否，将本地缓存KEY的value值清空
                            LocalStorage.remove(LOCAL_KEY_REMEMBER_USER);
                            //或者直接赋值为null也可以
                            //LocalStorage.set(LOCAL_KEY_REMEMBER_USER,null);
                        }
                        console.log("登录成功 = " + JSON.stringify(resp.content));
                        //前端将后端传来的用户信息进行保存
                        /**保存的方式有多种：
                         * HTML5本地缓存--localStorage：关闭页面后，信息还在，并没有被清空，适合安全的内网环境。
                         * 会话缓存--sessionStorage：页面刷新的时候信息不会丢失，关闭页面后，信息自动清空，适合用来存储登录信息
                         * js的全局变量：页面刷新时，信息会丢失
                         * vue的store：页面刷新时，信息会丢失
                         */
                        //这里推荐使用sessionStorage会话缓存
                        Tool.setLoginUser(resp.content);
                        // 直接使用vue路径跳转会导致welcome页面的侧边栏收缩按钮失效。
                        // 这里直接用js原生的方法，解决问题。
                        _this.$router.push("/welcome");
                        // window.open("/welcome", "_self")
                    } else {
                        _this.user.password = null;
                        _this.user.imageCode = null;
                        _this.loadImageCode();
                        Toast.error(resp.message);
                    }
                })
            },

            /**
             * 加载图形验证码
             */
            loadImageCode: function () {
                let _this = this;
                _this.imageCodeToken = Tool.uuid(8);
                //改为辨识度更高，更清晰的验证码图片，方便后台工作人员使用
                $('#image-code').attr('src', process.env.VUE_APP_SERVER + '/system/admin/kaptcha/image-simple-code/' + _this.imageCodeToken);
                // $('#image-code').attr('src', process.env.VUE_APP_SERVER + '/system/admin/kaptcha/image-code/' + _this.imageCodeToken);
            },


        },
    }
</script>

<style scoped>
    .input-group-addon {
        padding: 0;
    }
</style>
